<template>
  <div class="system-operation-log">
    <div class="log-header">
      <div class="header-title">
        <div class="title-icon-wrapper">
          <i class="el-icon-document"></i>
        </div>
        <span>学信链操作日志</span>
        <div class="title-badge">实时</div>
      </div>
      <div class="header-actions">
        <el-button type="primary" size="small" @click="refreshLogs" :loading="loading" plain class="refresh-button">
          <i class="el-icon-refresh"></i> 刷新
        </el-button>
        <el-select v-model="logType" size="small" placeholder="日志类型" class="log-filter">
          <el-option label="全部操作" value="all"></el-option>
          <el-option label="证书操作" value="certificate">
            <div class="option-item">
              <div class="option-icon certificate"><i class="el-icon-document"></i></div>
              <span>证书操作</span>
            </div>
          </el-option>
          <el-option label="学生操作" value="student">
            <div class="option-item">
              <div class="option-icon student"><i class="el-icon-user"></i></div>
              <span>学生操作</span>
            </div>
          </el-option>
          <el-option label="系统操作" value="system">
            <div class="option-item">
              <div class="option-icon system"><i class="el-icon-setting"></i></div>
              <span>系统操作</span>
            </div>
          </el-option>
        </el-select>
      </div>
    </div>
    
    <div class="table-container">
      <el-table
        v-loading="loading"
        :data="filteredLogs"
        stripe
        style="width: 100%"
        :header-cell-style="{
          color: '#334155',
          fontWeight: '600'
        }"
        :cell-style="{
          padding: '12px 0'
        }"
        size="small"
        empty-text="暂无操作记录"
        highlight-current-row
        @row-click="showDetails"
      >
        <el-table-column prop="timestamp" label="时间" width="160">
          <template #default="scope">
            <div class="time-cell">
              <i class="el-icon-time"></i>
              <span>{{ formatTime(scope.row.timestamp) }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="操作类型" width="110">
          <template #default="scope">
            <div class="type-cell">
              <el-tag :type="getTypeTag(scope.row.type)" effect="light">
                <div class="tag-content">
                  <i :class="getTypeIcon(scope.row.type)"></i>
                  <span>{{ getTypeText(scope.row.type) }}</span>
                </div>
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="user" label="操作人" width="120">
          <template #default="scope">
            <div class="user-cell">
              <div class="user-avatar">{{ (scope.row.user || '管理员').substring(0, 1) }}</div>
              <span>{{ scope.row.user || '管理员' }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="action" label="操作内容" min-width="200">
          <template #default="scope">
            <div class="action-content">
              {{ scope.row.action }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="80">
          <template #default="scope">
            <div class="status-cell">
              <el-tag :type="scope.row.status === 'success' ? 'success' : 'danger'" size="small" effect="dark">
                <div class="tag-content">
                  <i :class="scope.row.status === 'success' ? 'el-icon-check' : 'el-icon-close'"></i>
                  <span>{{ scope.row.status === 'success' ? '成功' : '失败' }}</span>
                </div>
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="详情" width="80">
          <template #default="scope">
            <div class="detail-cell">
              <el-button @click.stop="showDetails(scope.row)" type="text" size="small" class="detail-button">
                <i class="el-icon-view"></i>
                <span>详情</span>
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <div class="pagination-container">
      <el-pagination
        layout="prev, pager, next"
        :total="totalLogs"
        :current-page="currentPage"
        :page-size="pageSize"
        @current-change="handlePageChange"
        background
      ></el-pagination>
    </div>
    
    <!-- 操作详情对话框 -->
    <el-dialog
      v-model="detailsDialogVisible"
      title="操作详情"
      width="550px"
      destroy-on-close
      :show-close="true"
      class="details-dialog"
    >
      <div v-if="selectedLog" class="log-details">
        <div class="detail-header">
          <div class="detail-status" :class="selectedLog.status">
            <i :class="selectedLog.status === 'success' ? 'el-icon-check' : 'el-icon-close'"></i>
            <span>{{ selectedLog.status === 'success' ? '操作成功' : '操作失败' }}</span>
          </div>
          <div class="detail-time">{{ formatTime(selectedLog.timestamp) }}</div>
        </div>
        
        <div class="detail-item">
          <span class="item-label">操作ID:</span>
          <span class="item-value id-value">
            {{ selectedLog.id }}
            <el-button type="text" size="mini" class="copy-btn" @click="copyToClipboard(selectedLog.id)">
              <i class="el-icon-document-copy"></i>
            </el-button>
          </span>
        </div>
        <div class="detail-item">
          <span class="item-label">操作人:</span>
          <span class="item-value">
            <div class="detail-user">
              <div class="detail-avatar">{{ (selectedLog.user || '管理员').substring(0, 1) }}</div>
              {{ selectedLog.user || '管理员' }}
            </div>
          </span>
        </div>
        <div class="detail-item">
          <span class="item-label">IP地址:</span>
          <span class="item-value">
            <div class="ip-value">
              <i class="el-icon-location-information"></i>
              {{ selectedLog.ip || '未记录' }}
            </div>
          </span>
        </div>
        <div class="detail-item">
          <span class="item-label">操作类型:</span>
          <span class="item-value">
            <el-tag :type="getTypeTag(selectedLog.type)" effect="light">
              <div class="tag-content">
                <i :class="getTypeIcon(selectedLog.type)"></i>
                <span>{{ getTypeText(selectedLog.type) }}</span>
              </div>
            </el-tag>
          </span>
        </div>
        <div class="detail-item">
          <span class="item-label">操作内容:</span>
          <div class="item-value action-full">{{ selectedLog.action }}</div>
        </div>
        <div v-if="selectedLog.details" class="detail-item">
          <span class="item-label">详细信息:</span>
          <pre class="detail-json">{{ JSON.stringify(selectedLog.details, null, 2) }}</pre>
        </div>
        <div v-if="selectedLog.error" class="detail-item error-item">
          <span class="item-label">错误信息:</span>
          <div class="item-value error-message">
            <i class="el-icon-warning"></i>
            {{ selectedLog.error }}
          </div>
        </div>
        
        <div class="dialog-footer">
          <el-button @click="detailsDialogVisible = false" plain>关闭</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import LogService from '@/store/logService'

export default {
  name: 'SystemOperationLog',
  props: {
    limit: {
      type: Number,
      default: 10
    }
  },
  setup(props) {
    const logs = ref([])
    const loading = ref(false)
    const logType = ref('all')
    const currentPage = ref(1)
    const pageSize = ref(props.limit)
    const totalLogs = ref(0)
    const detailsDialogVisible = ref(false)
    const selectedLog = ref(null)
    
    // 从logService获取日志
    const getLogsFromStorage = () => {
      try {
        return LogService.getLogs()
      } catch (error) {
        console.error('获取日志数据失败:', error)
        return []
      }
    }
    
    // 初始化日志数据
    const initLogs = () => {
      loading.value = true
      
      try {
        const storedLogs = getLogsFromStorage()
        
        if (storedLogs.length === 0) {
          // 如果没有日志，创建一些示例数据
          const mockLogs = generateMockLogs()
          logs.value = mockLogs
          totalLogs.value = mockLogs.length
          
          // 保存到本地存储
          LogService.saveLogs(mockLogs)
        } else {
          logs.value = storedLogs
          totalLogs.value = storedLogs.length
        }
      } catch (error) {
        console.error('初始化日志失败:', error)
        ElMessage.error('获取操作日志失败')
      } finally {
        loading.value = false
      }
    }
    
    // 生成模拟日志数据
    const generateMockLogs = () => {
      const now = Date.now()
      const mockLogs = []
      
      // 生成30条模拟日志
      for (let i = 1; i <= 30; i++) {
        const types = ['certificate', 'student', 'system']
        const type = types[Math.floor(Math.random() * types.length)]
        
        let action = ''
        if (type === 'certificate') {
          const actions = ['创建证书', '撤销证书', '验证证书', '更新证书']
          action = actions[Math.floor(Math.random() * actions.length)]
        } else if (type === 'student') {
          const actions = ['添加学生', '更新学生信息', '查询学生']
          action = actions[Math.floor(Math.random() * actions.length)]
        } else {
          const actions = ['登录系统', '退出系统', '修改配置', '备份数据']
          action = actions[Math.floor(Math.random() * actions.length)]
        }
        
        const details = {
          id: `ID_${Math.floor(Math.random() * 1000)}`,
          operation: action,
          additional: Math.random() > 0.5 ? '附加信息' : null
        }
        
        mockLogs.push({
          id: `log_${i}`,
          timestamp: now - (i * 3600000), // 每条日志间隔1小时
          type,
          user: '管理员',
          action: `${action} ${details.id}`,
          status: Math.random() > 0.2 ? 'success' : 'error',
          ip: `192.168.1.${Math.floor(Math.random() * 255)}`,
          details,
          error: Math.random() > 0.8 ? '操作超时' : null
        })
      }
      
      return mockLogs
    }
    
    // 刷新日志
    const refreshLogs = () => {
      loading.value = true
      
      setTimeout(() => {
        const freshLogs = getLogsFromStorage()
        logs.value = freshLogs
        
        // 更新总数和当前页
        if (logType.value === 'all') {
          totalLogs.value = freshLogs.length
        } else {
          const filteredCount = freshLogs.filter(log => log.type === logType.value).length
          totalLogs.value = filteredCount
        }
        
        // 如果当前页没有数据了，回到第一页
        const maxPage = Math.ceil(totalLogs.value / pageSize.value) || 1
        if (currentPage.value > maxPage) {
          currentPage.value = 1
        }
        
        loading.value = false
        ElMessage.success('日志已刷新')
      }, 300)
    }
    
    // 根据类型筛选日志
    const filteredLogs = computed(() => {
      let filtered = logs.value
      
      if (logType.value !== 'all') {
        filtered = filtered.filter(log => log.type === logType.value)
      }
      
      // 分页处理
      const start = (currentPage.value - 1) * pageSize.value
      const end = currentPage.value * pageSize.value
      
      return filtered.slice(start, end)
    })
    
    // 添加单独的计算属性用于计算总数
    const computedTotalLogs = computed(() => {
      let filtered = logs.value
      
      if (logType.value !== 'all') {
        filtered = filtered.filter(log => log.type === logType.value)
      }
      
      return filtered.length
    })
    
    // 处理分页变化
    const handlePageChange = (page) => {
      currentPage.value = page
    }
    
    // 当logType改变时更新totalLogs
    watch(computedTotalLogs, (newTotal) => {
      totalLogs.value = newTotal
    })
    
    // 显示详情
    const showDetails = (log) => {
      selectedLog.value = log
      detailsDialogVisible.value = true
    }
    
    // 格式化时间
    const formatTime = (timestamp) => {
      if (!timestamp) return '未知时间'
      
      const date = new Date(timestamp)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      })
    }
    
    // 获取类型对应的标签类型
    const getTypeTag = (type) => {
      switch (type) {
        case 'certificate': return 'primary'
        case 'student': return 'success'
        case 'system': return 'info'
        default: return 'info'
      }
    }
    
    // 获取类型对应的文本
    const getTypeText = (type) => {
      switch (type) {
        case 'certificate': return '证书'
        case 'student': return '学生'
        case 'system': return '系统'
        default: return '未知'
      }
    }
    
    // 获取类型对应的图标
    const getTypeIcon = (type) => {
      switch (type) {
        case 'certificate': return 'el-icon-document'
        case 'student': return 'el-icon-user'
        case 'system': return 'el-icon-setting'
        default: return 'el-icon-info'
      }
    }
    
    // 复制到剪贴板
    const copyToClipboard = (text) => {
      navigator.clipboard.writeText(text).then(() => {
        ElMessage.success('已复制到剪贴板')
      }).catch(err => {
        console.error('复制失败:', err)
        ElMessage.error('复制失败')
      })
    }
    
    // 向外部提供添加日志的方法
    const addLog = (logData) => {
      if (!logData || !logData.action) return
      
      const newLog = {
        id: `log_${Date.now()}`,
        timestamp: Date.now(),
        type: logData.type || 'system',
        user: logData.user || '管理员',
        action: logData.action,
        status: logData.status || 'success',
        ip: logData.ip || '',
        details: logData.details || null,
        error: logData.error || null
      }
      
      // 使用LogService添加日志
      LogService.addLog(logData)
      
      // 获取最新的日志并更新显示
      const updatedLogs = getLogsFromStorage()
      logs.value = updatedLogs
      totalLogs.value = updatedLogs.length
      
      // 确保显示最新日志，回到第一页
      currentPage.value = 1
      
      return newLog
    }
    
    onMounted(() => {
      initLogs()
    })
    
    return {
      logs,
      loading,
      logType,
      currentPage,
      pageSize,
      totalLogs,
      filteredLogs,
      detailsDialogVisible,
      selectedLog,
      refreshLogs,
      handlePageChange,
      showDetails,
      formatTime,
      getTypeTag,
      getTypeText,
      getTypeIcon,
      copyToClipboard,
      addLog
    }
  }
}
</script>

<style scoped>
.system-operation-log {
  width: 100%;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.system-operation-log::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #3498db, #9b59b6, #3498db);
  background-size: 200% 100%;
  animation: gradientBorder 4s linear infinite;
}

.table-container {
  overflow: hidden;
  border-radius: 8px;
  margin: 5px 0;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

@keyframes gradientBorder {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f2f5;
  position: relative;
}

.header-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  letter-spacing: 0.5px;
  position: relative;
}

.title-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #4d72ff, #6c60fd);
  margin-right: 12px;
  box-shadow: 0 4px 8px rgba(77, 114, 255, 0.25);
}

.header-title i {
  color: white;
  font-size: 18px;
  animation: pulse 2s infinite;
}

.title-badge {
  background: linear-gradient(90deg, #ff6b6b, #ff8e8e);
  color: white;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 10px;
  font-weight: 500;
  animation: pulseBadge 2s infinite alternate;
}

@keyframes pulseBadge {
  from { opacity: 0.8; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.header-actions {
  display: flex;
  align-items: center;
}

.log-filter {
  margin-left: 15px;
  width: 120px;
  transition: all 0.3s;
}

.log-filter:hover {
  transform: translateY(-2px);
}

.refresh-button {
  position: relative;
  overflow: hidden;
  padding: 8px 16px;
  border-radius: 8px;
  background: linear-gradient(45deg, rgba(52, 179, 241, 0.1), rgba(97, 73, 205, 0.1));
  border: 1px solid rgba(97, 73, 205, 0.2);
  transition: all 0.3s;
}

.refresh-button:hover {
  background: linear-gradient(45deg, rgba(52, 179, 241, 0.2), rgba(97, 73, 205, 0.2));
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(97, 73, 205, 0.1);
}

.refresh-button i {
  margin-right: 5px;
  transition: transform 0.8s;
}

.refresh-button:hover i {
  transform: rotate(180deg);
}

.option-item {
  display: flex;
  align-items: center;
  padding: 2px 0;
}

.option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  margin-right: 8px;
}

.option-icon i {
  color: white;
  font-size: 14px;
}

.option-icon.certificate {
  background: linear-gradient(135deg, #ff8d61, #fd6c93);
}

.option-icon.student {
  background: linear-gradient(135deg, #4d72ff, #6c60fd);
}

.option-icon.system {
  background: linear-gradient(135deg, #0ec0b8, #17c964);
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
}

:deep(.el-table:hover) {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

:deep(.el-table__header-wrapper th) {
  background: linear-gradient(to right, #f8fafc, #f1f5f9) !important;
  font-weight: 600 !important;
  color: #334155 !important;
  padding: 14px 0 !important;
  height: 50px;
  transition: all 0.2s;
}

:deep(.el-table__row) {
  transition: all 0.3s;
  cursor: pointer;
}

:deep(.el-table__row:hover) {
  background-color: #f8fafd !important;
  transform: translateY(-2px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background-color: #f9fafb;
}

.time-cell {
  display: flex;
  align-items: center;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  color: #64748b;
  font-size: 13px;
}

.time-cell i {
  margin-right: 6px;
  color: #94a3b8;
  font-size: 14px;
}

.type-cell {
  display: flex;
  justify-content: center;
}

.tag-content {
  display: flex;
  align-items: center;
}

.tag-content i {
  margin-right: 5px;
}

.user-cell {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4d72ff, #6c60fd);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  margin-right: 8px;
}

.status-cell {
  display: flex;
  justify-content: center;
}

.detail-cell {
  display: flex;
  justify-content: center;
}

.detail-button {
  display: flex;
  align-items: center;
  color: #4d72ff;
  transition: all 0.3s;
}

.detail-button i {
  margin-right: 4px;
  font-size: 16px;
  transition: all 0.3s;
}

.detail-button:hover {
  color: #6c60fd;
  transform: translateY(-1px);
}

.detail-button:hover i {
  transform: scale(1.2);
}

:deep(.el-tag) {
  border-radius: 6px;
  font-weight: 500;
  padding: 0 8px;
  height: 26px;
  line-height: 26px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
}

:deep(.el-tag--dark.el-tag--success) {
  background: linear-gradient(to right, #17c964, #0ec0b8);
  border: none;
}

:deep(.el-tag--dark.el-tag--danger) {
  background: linear-gradient(to right, #f31260, #f97316);
  border: none;
}

:deep(.el-tag--light.el-tag--success) {
  background-color: rgba(23, 201, 100, 0.1);
  border-color: rgba(23, 201, 100, 0.2);
  color: #17c964;
}

:deep(.el-tag--light.el-tag--danger) {
  background-color: rgba(243, 18, 96, 0.1);
  border-color: rgba(243, 18, 96, 0.2);
  color: #f31260;
}

:deep(.el-tag--light.el-tag--primary) {
  background-color: rgba(77, 114, 255, 0.1);
  border-color: rgba(77, 114, 255, 0.2);
  color: #4d72ff;
}

:deep(.el-tag--light.el-tag--info) {
  background-color: rgba(144, 147, 153, 0.1);
  border-color: rgba(144, 147, 153, 0.2);
  color: #909399;
}

.action-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
  color: #303133;
  font-size: 14px;
  padding: 0 5px;
  position: relative;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #f0f2f5;
}

:deep(.el-pagination) {
  padding: 0;
  font-weight: normal;
}

:deep(.el-pagination .btn-prev),
:deep(.el-pagination .btn-next) {
  background-color: #f8fafc;
  border-radius: 8px;
  margin: 0 5px;
}

:deep(.el-pagination .el-pagination__item) {
  border-radius: 8px;
  transition: all 0.3s;
  margin: 0 3px;
}

:deep(.el-pagination .el-pagination__item:hover) {
  transform: translateY(-2px);
}

:deep(.el-pagination .el-pagination__item.is-active) {
  background: linear-gradient(to right, #4d72ff, #6c60fd);
  color: white;
  border: none;
  font-weight: 600;
  box-shadow: 0 4px 8px rgba(77, 114, 255, 0.25);
}

/* 详情对话框样式 */
:deep(.details-dialog .el-dialog) {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

:deep(.details-dialog .el-dialog__header) {
  background: linear-gradient(to right, #4d72ff, #6c60fd);
  padding: 16px 20px;
  position: relative;
  box-shadow: 0 3px 10px rgba(77, 114, 255, 0.15);
}

:deep(.details-dialog .el-dialog__title) {
  color: white;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.5px;
}

:deep(.details-dialog .el-dialog__headerbtn .el-dialog__close) {
  color: rgba(255, 255, 255, 0.9);
}

:deep(.details-dialog .el-dialog__body) {
  padding: 0;
}

.log-details {
  padding: 0;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background-color: #f8fafb;
  border-bottom: 1px solid #edf2f7;
  margin-bottom: 16px;
}

.detail-status {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
}

.detail-status.success {
  color: #17c964;
}

.detail-status.error {
  color: #f31260;
}

.detail-status i {
  margin-right: 8px;
  font-size: 20px;
}

.detail-time {
  color: #64748b;
  font-size: 14px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.detail-item {
  margin-bottom: 16px;
  display: flex;
  padding: 0 20px 16px;
  border-bottom: 1px dashed #edf2f7;
}

.detail-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.item-label {
  width: 80px;
  font-weight: 600;
  color: #64748b;
}

.item-value {
  flex: 1;
  color: #1e293b;
}

.id-value {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  background-color: #f8fafb;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  color: #64748b;
  display: flex;
  align-items: center;
}

.copy-btn {
  margin-left: 8px;
  padding: 2px;
  height: auto;
  color: #94a3b8;
}

.copy-btn:hover {
  color: #4d72ff;
}

.detail-user {
  display: flex;
  align-items: center;
}

.detail-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4d72ff, #6c60fd);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  margin-right: 10px;
}

.ip-value {
  display: flex;
  align-items: center;
}

.ip-value i {
  margin-right: 8px;
  color: #94a3b8;
}

.action-full {
  white-space: normal;
  word-break: break-word;
  line-height: 1.6;
  padding: 10px;
  background-color: #f8fafb;
  border-radius: 8px;
  font-size: 14px;
}

.detail-json {
  background-color: #1e293b;
  padding: 16px;
  border-radius: 8px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  white-space: pre-wrap;
  font-size: 13px;
  max-height: 200px;
  overflow-y: auto;
  color: #e2e8f0;
}

.error-item {
  margin-top: 16px;
}

.error-message {
  color: #f31260;
  background-color: rgba(243, 18, 96, 0.08);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  line-height: 1.6;
}

.error-message i {
  font-size: 16px;
  margin-right: 8px;
  margin-top: 1px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px 20px;
  background-color: #f8fafb;
  border-top: 1px solid #edf2f7;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .system-operation-log {
    padding: 16px;
  }
  
  .header-title {
    font-size: 16px;
  }
  
  .title-icon-wrapper {
    width: 32px;
    height: 32px;
  }
  
  .header-title i {
    font-size: 16px;
  }
  
  .time-cell {
    font-size: 12px;
  }
  
  .detail-item {
    flex-direction: column;
  }
  
  .item-label {
    width: 100%;
    margin-bottom: 6px;
  }
}
</style> 